<template>
  <div id="teml">
      <!--标题-->
    <div id="desc">
        <h4 v-text="photoInfo.title"></h4>
        <p>{{photoInfo.add_time}} {{photoInfo.click}}次点击</p>
    </div>
    <!--九宫格-->
    <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="(item,index) in photoList">
                <img class="preview-img" :src="item.src" height="100" @click="$preview.open(index,photoList)">
            </li>
        </ul> 
    </div>
    <!--描述-->
    <p id="miaoshu" v-html="photoInfo.content">
    </p>
    <!--评论-->
    <comment :id="id"></comment>
  </div>
</template>

<script>
import Toast from 'mint-ui';
import comment from '../subcom/comment.vue';
import common from '../../kits/common.js'
export default {
    components:{
        comment
    },
    data(){
        return {
            id:0,
            photoInfo:{},
            photoList:[]
        }
    },
    methods:{
        getData(){
            var url = common.newdomain + '/api/getimageInfo/' + this.id
            this.$http.get(url).then(function(res){
                if(res.body.status != 0){
                    Toast(res.body.message);
                    return;
                }
                this.photoInfo = res.body.message[0];
            })
        },
        getList(){
            var url = common.newdomain + '/api/getthumimages/' + this.id
            this.$http.get(url).then(function(res){
                if(res.body.status != 0){
                    Toast(res.body.message);
                    return;
                }
                //vue-proview中还需要h,w两个参数来确定放大后图片的大小
                res.body.message.forEach(function(item,index){
                    var img = document.createElement('img')
                    img.src = item.src;
                    item.w = img.width;
                    item.h = img.height;
                })
                this.photoList = res.body.message;
            })
        }
    },
    created(){
      this.id = this.$route.params.id;
      this.getData();
      this.getList();
  }
}
</script>

<style scoped>
    #desc{
        padding:5px;
    }
    #desc h4{
        color:#26a2ff;
    }
    .mui-grid-view.mui-grid-9{
        background-color: #fff;
        border:0;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border:0;
    }
    #miaoshu{
        padding:5px;
        padding-bottom:10px;
    }
    .mui-content{
        border-top:2px solid #ccc;
        border-botom:1px solid #ccc;
        margin-bottom:5px;
    }
</style>
